<template>
  <div class="article">
    <ul class="tab">
      <li class="tab__item--first">状态 :</li>
      <li class="tab__item">全部</li>
      <li class="tab__item">以上线</li>
      <li class="tab__item">审核中</li>
      <li class="tab__item">未通过</li>
      <li class="tab__item">草稿</li>
    </ul>
    <div class="content">
      <div
        class="content__item"
        v-for="(artical, index) in articalList"
        :key="index"
      >
        <div class="item__left">
          <img :src="artical.pic" class="item__left-img" alt="" />
        </div>
        <div class="item__middle">
          <div class="item__middle-title">{{ artical.title }}</div>
          <div class="item__middle-date">{{ artical.date }}</div>
          <div class="item__middle-status" :style="statusColor(artical.status)">
            {{ artical.status | statusTrans }}
          </div>
        </div>
        <div class="item__right">
          <div class="button--min-grey button--first">
            <img
              class="button__pre-img"
              src="../../../assets/images/icons/icon_arrow_down.png"
              alt=""
            />
            修改
          </div>
          <div class="button--min-grey" @click="showDeleteDiaglog">
            <img
              class="button__pre-img"
              src="../../../assets/images/icons/icon_arrow_down.png"
              alt=""
            />删除
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      custom-class="royole-dialog-min"
      :visible.sync="deleteDialogShow"
      :show-close="false"
    >
      <div class="dialog-text">
        删除后不可恢复，确认删除？
      </div>
      <div class="dialog-buttons">
        <div class="button--grey" @click="deleteDialogShow = false">
          取消
        </div>
        <div class="button--active" @click="deleteData">删除</div>
      </div>
    </el-dialog>

    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :total="articalList.length"
      :page-size="3"
      @current-page="currentPage"
      
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Artical',
  filters: {
    statusTrans(status) {
      status = parseInt(status)
      switch (status) {
        case 1:
          return '以上线'
        case 2:
          return '审核中'
        case 3:
          return '未通过'
        case 4:
          return '草稿'
      }
    },
  },
  data() {
    return {
      // 是否展示删除弹框
      deleteDialogShow: false,
      currentId: '',
      currentPages:"1",
      articalList: [
        {
          id: '66',
          pic:
            'https://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/1.jpg',
          date: '20220-11-12 09:43:35',
          status: '3',
          title: '文章标题',
        },
        {
          id: '67',
          pic:
            'https://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/1.jpg',
          date: '20220-11-12 09:43:35',
          status: '2',
          title: '文章标题',
        },
        {
          id: '68',
          pic:
            'https://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/1.jpg',
          date: '20220-11-12 09:43:35',
          status: '1',
          title: '文章标题',
        },
        {
          id: '69',
          pic:
            'https://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/1.jpg',
          date: '20220-11-12 09:43:35',
          status: '3',
          title: '文章标题',
        },
        {
          id: '66',
          pic:
            'https://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/1.jpg',
          date: '20220-11-12 09:43:35',
          status: '3',
          title: '文章标题',
        },
        {
          id: '67',
          pic:
            'https://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/1.jpg',
          date: '20220-11-12 09:43:35',
          status: '2',
          title: '文章标题',
        },
        {
          id: '68',
          pic:
            'https://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/1.jpg',
          date: '20220-11-12 09:43:35',
          status: '1',
          title: '文章标题',
        },
        {
          id: '69',
          pic:
            'https://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/1.jpg',
          date: '20220-11-12 09:43:35',
          status: '3',
          title: '文章标题',
        },
        {
          id: '66',
          pic:
            'https://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/1.jpg',
          date: '20220-11-12 09:43:35',
          status: '3',
          title: '文章标题',
        },
        {
          id: '67',
          pic:
            'https://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/1.jpg',
          date: '20220-11-12 09:43:35',
          status: '2',
          title: '文章标题',
        },
        {
          id: '68',
          pic:
            'https://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/1.jpg',
          date: '20220-11-12 09:43:35',
          status: '1',
          title: '文章标题',
        },
        {
          id: '69',
          pic:
            'https://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/1.jpg',
          date: '20220-11-12 09:43:35',
          status: '3',
          title: '文章标题',
        },
      ],
    }
  },
  methods: {
    statusColor(status) {
      status = parseInt(status)

      switch (status) {
        case 1:
          return 'color: #12C88A '
        case 2:
          return 'color: #FFAA00 '
        case 3:
          return 'color: #EB2D4B'
      }
    },
    // 显示 删除dialog
    showDeleteDiaglog(id) {
      this.currentId = id
      this.deleteDialogShow = true
    },
    // 清除数据
    deleteData() {
      this.deleteDialogShow = false
    },
    //点击分页
    currentPage(){

    }
  },
}
</script>

<style lang="scss" scoped>
.article {
  position: relative;
}
.tab {
  height: 52px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.tab__item--first {
  display: inline-block;
  padding-right: 10px;
  padding-left: 32px;
  line-height: 52px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}
.tab__item {
  display: inline-block;
  padding-right: 24px;
  line-height: 52px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}
.content {
  padding-bottom: 30px;
}
.content__item {
  padding: 24px 32px;
  display: flex;
  height: 138px;
}
.content__left {
  width: 160px;
}
.item__left-img {
  border-radius: 8px;
  width: 160px;
  height: 90px;
}
.item__middle {
  width: 544px;
  padding: 0 16px;
}
.item__middle-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 400;
  font-size: 16px;
}
.item__middle-date {
  padding-top: 8px;
  padding-bottom: 14px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}
.item__middle-status {
  font-size: 14px;
  font-weight: 400;
}
.item__right {
  display: flex;
}
.button--first {
  margin-right: 24px;
}
.button__pre-img {
  width: 17px;
  height: 17px;
}
.button--min-grey {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 92px;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.dialog-text {
  margin-top: -10px;
  margin-bottom: 40px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}
.dialog-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
}
.button--grey {
  margin-right: 24px;
  @include button(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.6));
}
.button--active {
  @include button($color-royole, #ffffff);
}
.pagination {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
